<template>
    <div class="dqzjx_wrap">
        <vue-scroll :ops="$root.scrollOpsY">
            <div class="page-content">
                <div>
                    <div class="flow-label">至江东柔直母线 ±10kV</div>
                    <div class="flow-label">至20kV寒冰开关站交流母线</div>
                    <div class="flow-label">AC 20kV</div>
                    <div class="flow-label">DC ±375V</div>
                    <div class="flow-label">DC ±375V</div>
                    <div class="flow-label">AC 380V</div>
                    <div class="flow-label">预留间隙至<br/>园区直流母<br/>线 ±375V</div>
                    <div class="flow-label">控制及保护系统</div>
                    <div class="flow-label">电解水制氢系统</div>
                    <div class="flow-label">#1氢燃料电池</div>
                    <div class="flow-label">#2氢燃料电池</div>
                    <div class="flow-label">#1氢气增压机</div>
                    <div class="flow-label">#2氢燃增压机</div>
                    <div class="flow-label">其他交流负荷</div>
                    <div class="flow-label">光伏发电系统</div>
                </div>

                <div>
                    <div class="flow-title">直流变压器</div>
                    <div class="flow-title">远期光伏发电系统</div>
                </div>

                <div>
                    <div class="flow-val">
                        <!--25-->
                        <div>有功：{{ valveState[16442] | formatFlowValue }}KW</div>
                        <!--26-->
                        <div>无功：{{ valveState[16443] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--27-->
                        <div>电压：{{ valveState[16443] | formatFlowValue }}V</div>
                        <!--28-->
                        <div>频率：{{ valveState[16444] | formatFlowValue }}Hz</div>
                    </div>
                    <div class="flow-val">
                        <!--29-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--30-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--31-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--32-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--33-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--34-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--9-->
                        <div>电压：{{ valveState[164432] | formatFlowValue }}V</div>
                    </div>
                    <div class="flow-val">
                        <!--10-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--11-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--12-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--13-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--14-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--15-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--16-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--17-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--36-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--37-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--38-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--39-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--40-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--41-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--42-->
                        <div>电压：{{ valveState[16443] | formatFlowValue }}V</div>
                        <!--43-->
                        <div>频率：{{ valveState[16444] | formatFlowValue }}Hz</div>
                    </div>

                    <div class="flow-val">
                        <!--1-->
                        <div>电压：{{ valveState[16443] | formatFlowValue }}V</div>
                        <!--2-->
                        <div>频率：{{ valveState[16444] | formatFlowValue }}Hz</div>
                    </div>
                    <div class="flow-val">
                        <!--4-->
                        <div>电压：{{ valveState[16442] | formatFlowValue }}V</div>
                    </div>
                    <div class="flow-val">
                        <!--5-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--6-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                    <div class="flow-val">
                        <!--7-->
                        <div>有功：{{ valveState[16443] | formatFlowValue }}KW</div>
                        <!--8-->
                        <div>无功：{{ valveState[16444] | formatFlowValue }}Kvar</div>
                    </div>
                </div>

                <div>
                    <!--3-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--35-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--18-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--19-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--20-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--21-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--22-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--23-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--24-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--44-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <!--45-->
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                    <div class="state-panel">
                        <div class="state-item is_green"><span></span><span>运行</span></div>
                        <div class="state-item"><span></span><span>停机</span></div>
                        <div class="state-item"><span></span><span>故障</span></div>
                    </div>
                    <div class="state-panel">
                        <div :class="`state-item ${ valveState[27] ? 'is_green' : '' }`"><span></span><span>运行</span></div>
                        <div :class="`state-item ${ valveState[28] ? 'is_red' : '' }`"><span></span><span>停机</span></div>
                        <div :class="`state-item ${ valveState[29] ? 'is_yellow' : '' }`"><span></span><span>故障</span></div>
                    </div>
                </div>

                <!--断路器-->
                <div>
                    <!--46-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>
                    <!--58-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>
                    <!--59-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 28 )"></div>
                    <!--61-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>
                    <!--63-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>

                    <div :class="`flow-dlq is_hover `"></div>
                    <!--47-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 28 )"></div>
                    <!--48-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--60-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--62-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--49-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--50-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 28 )"></div>
                    <!--51-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>
                    <!--52-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--53-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 28 )"></div>
                    <!--54-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 28 )"></div>
                    <!--55-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--56-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 29 )"></div>
                    <!--57-->
                    <div :class="`flow-dlq is_hover ${ valveState[27] ? 'is_red' : '' }`" @click="dlqItemClick( 27 )"></div>
                </div>

                <ControlDialog ref="controlDialog"
                               :dialogTitle="dialogTitle"
                ></ControlDialog>

            </div>
        </vue-scroll>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        filters: {
            formatFlowValue: function ( val ) {
                if( !val ) {
                    return '**'
                }

                return val.toFixed( 1 )
            },
        },
        data() {
            return {
                dialogTitle: '控制命令确认',
                valveState: {},
            }
        },
        methods: {
            getData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                27,
                                28,
                                29,
                                16442,
                                16443,
                                16444,
                                16443,
                                16444,
                                16442,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                16442,
                                16443,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                27,
                                28,
                                29,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                16443,
                                16444,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                27,
                                28,
                                29,
                                29,
                                27,
                                28,
                                29,
                                29,
                                27,
                                28,
                                29,
                                29,
                                27,
                                28,
                                29,
                                27,
                                29,
                                27,
                            ],
                        }
                    ]
                ).then(( res )=> {
                    var data = res[0].result || [];
                    var obj = {};

                    for( var i=0; i<data.length; i++ ) {
                        obj[ data[i].address ] = data[i].value;
                    }

                    this.valveState = obj;
                })
            },

            dlqItemClick() {
                this.$refs.controlDialog.dialogVisible = true;
            },

        },
        mounted() {
            this.getData();
        }
    }
</script>

<style lang="less">
    .dqzjx_wrap {
        background-color: #FFFFFF;
        border-radius: 8px;
        position: relative;

        .page-content {
            width: 1540px;
            height: 843px;
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            /*bottom: 0;*/
            margin: auto;
            /*background-image: url("../../assets/images/dqzjx/img_page.png");*/
            background-image: url("../../assets/images/dqzjx/img_page_1.png");
            background-repeat: no-repeat;
            background-position: center top;

            .flow-label {
                font-size: 14px;
                color: #0E1526;
                line-height: 20px;
                font-weight: 600;
                position: absolute;

                &:nth-of-type( 1 ) {
                    left: 36px;
                    top: 13px;
                }

                &:nth-of-type( 2 ) {
                    left: 440px;
                    top: 13px;
                }

                &:nth-of-type( 3 ) {
                    left: 533px;
                    top: 95px;
                }

                &:nth-of-type( 4 ) {
                    left: 36px;
                    top: 287px;
                }

                &:nth-of-type( 5 ) {
                    left: 239px;
                    top: 433px;
                }

                &:nth-of-type( 6 ) {
                    left: 1175px;
                    top: 433px;
                }

                &:nth-of-type( 7 ) {
                    left: 25px;
                    top: 692px;
                }

                &:nth-of-type( 8 ) {
                    left: 219px;
                    top: 773px;
                }

                &:nth-of-type( 9 ) {
                    left: 347px;
                    top: 773px;
                }

                &:nth-of-type( 10 ) {
                    left: 471px;
                    top: 773px;
                }

                &:nth-of-type( 11 ) {
                    left: 592px;
                    top: 773px;
                }

                &:nth-of-type( 12 ) {
                    left: 737px;
                    top: 725px;
                }

                &:nth-of-type( 13 ) {
                    left: 877px;
                    top: 725px;
                }

                &:nth-of-type( 14 ) {
                    left: 1000px;
                    top: 773px;
                }

                &:nth-of-type( 15 ) {
                    left: 1379px;
                    top: 741px;
                }
            }

            .flow-title {
                position: absolute;
                padding: 0 12px;
                height: 28px;
                line-height: 28px;
                background: #FF9500;
                border-radius: 4px;
                font-size: 14px;
                color: #FFFFFF;

                &:nth-of-type( 1 ) {
                    top: 162px;
                    left: 27px;
                }

                &:nth-of-type( 2 ) {
                    top: 24px;
                    left: 1351px;
                }
            }

            .flow-val {
                font-size: 14px;
                color: #0E1526;
                position: absolute;

                &:nth-of-type( 1 ) {
                    top: 14px;
                    left: 649px;
                }

                &:nth-of-type( 2 ) {
                    top: 129px;
                    left: 533px;
                }

                &:nth-of-type( 3 ) {
                    top: 129px;
                    left: 643px;
                }

                &:nth-of-type( 4 ) {
                    top: 129px;
                    left: 783px;
                }

                &:nth-of-type( 5 ) {
                    top: 129px;
                    left: 967px;
                }

                &:nth-of-type( 6 ) {
                    top: 434px;
                    left: 317px;
                }

                &:nth-of-type( 7 ) {
                    top: 473px;
                    left: 276px;
                }

                &:nth-of-type( 8 ) {
                    top: 473px;
                    left: 400px;
                }

                &:nth-of-type( 9 ) {
                    top: 473px;
                    left: 520px;
                }

                &:nth-of-type( 10 ) {
                    top: 473px;
                    left: 643px;
                }

                &:nth-of-type( 11 ) {
                    top: 473px;
                    left: 785px;
                }

                &:nth-of-type( 12 ) {
                    top: 473px;
                    left: 926px;
                }

                &:nth-of-type( 13 ) {
                    top: 473px;
                    left: 1049px;
                }

                &:nth-of-type( 14 ) {
                    top: 473px;
                    left: 1169px;
                }

                &:nth-of-type( 15 ) {
                    top: 13px;
                    left: 242px;
                }

                &:nth-of-type( 16 ) {
                    top: 286px;
                    left: 119px;
                }

                &:nth-of-type( 17 ) {
                    top: 334px;
                    left: 119px;
                }

                &:nth-of-type( 18 ) {
                    top: 334px;
                    left: 241px;
                }
            }

            .state-panel {
                width: 35px;
                height: 48px;
                background: #F9FAFE;
                box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
                border: 1px solid #CFD1D8;
                border-radius: 8px;
                position: absolute;
                margin-left: 2px;

                >.state-item {
                    line-height: 15px;

                    >span {
                        display: inline-block;
                        vertical-align: middle;
                        color: #535763;
                        font-size: 12px;
                        transform: scale(0.9,0.9);
                        position: relative;
                        top: -0.5px;

                        &:first-child {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #9A9FAF;
                            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
                            margin-left: 1.5px;
                        }
                    }

                    &.is_green {

                        span:first-child {
                            background-color: #35C759;
                        }
                    }

                    &.is_yellow {

                        span:first-child {
                            background-color: #FF9500;
                        }
                    }

                    &.is_red {

                        span:first-child {
                            background-color: #FF3B30;
                        }
                    }
                }

                &:before {
                    content: ' ';
                    position: absolute;
                    bottom: 0px;
                    left: -4px;
                    top: 0;
                    margin: auto;
                    width: 0;
                    height: 0;
                    border-top: 2px solid transparent;
                    border-bottom: 2px solid transparent;
                    border-right: 4px solid #e5e6ea;
                }

                &:nth-of-type( 1 ) {
                    top: 80px;
                    left: 263px;
                }

                &:nth-of-type( 2 ) {
                    top: 328px;
                    left: 679px;
                }

                &:nth-of-type( 3 ) {
                    top: 647px;
                    left: 313px;
                }

                &:nth-of-type( 4 ) {
                    top: 592px;
                    left: 433px;
                }

                &:nth-of-type( 5 ) {
                    top: 702px;
                    left: 433px;
                }

                &:nth-of-type( 6 ) {
                    top: 592px;
                    left: 555px;
                }

                &:nth-of-type( 7 ) {
                    top: 702px;
                    left: 555px;
                }

                &:nth-of-type( 8 ) {
                    top: 592px;
                    left: 677px;
                }

                &:nth-of-type( 9 ) {
                    top: 702px;
                    left: 677px;
                }

                &:nth-of-type( 10 ) {
                    top: 647px;
                    left: 819px;
                }

                &:nth-of-type( 11 ) {
                    top: 647px;
                    left: 961px;
                }

                &:nth-of-type( 12 ) {
                    top: 460px;
                    left: 1464px;
                }

                &:nth-of-type( 13 ) {
                    top: 658px;
                    left: 1482px;
                }
            }

            .flow-dlq {
                position: absolute;
                width: 16px;
                height: 22px;
                background: #35C759;
                border-radius: 2px;

                &.is_red {
                    background: #FF3B30;
                }

                &:nth-of-type( 1 ) {
                    left: 214px;
                    top: 165px;
                }

                &:nth-of-type( 2 ) {
                    left: 629px;
                    top: 66px;
                }

                &:nth-of-type( 3 ) {
                    left: 629px;
                    top: 174px;
                }

                &:nth-of-type( 4 ) {
                    left: 771px;
                    top: 174px;
                }

                &:nth-of-type( 5 ) {
                    left: 953px;
                    top: 174px;
                }

                &:nth-of-type( 6 ) {
                    left: 1415px;
                    top: 174px;
                }

                &:nth-of-type( 7 ) {
                    left: 214px;
                    top: 370px;
                }

                &:nth-of-type( 8 ) {
                    left: 214px;
                    top: 420px;
                }

                &:nth-of-type( 9 ) {
                    left: 629px;
                    top: 415px;
                }

                &:nth-of-type( 10 ) {
                    left: 771px;
                    top: 415px;
                }

                &:nth-of-type( 11 ) {
                    left: 92px;
                    top: 534px;
                }

                &:nth-of-type( 12 ) {
                    left: 263px;
                    top: 534px;
                }

                &:nth-of-type( 13 ) {
                    left: 385px;
                    top: 534px;
                }

                &:nth-of-type( 14 ) {
                    left: 507px;
                    top: 534px;
                }

                &:nth-of-type( 15 ) {
                    left: 629px;
                    top: 534px;
                }

                &:nth-of-type( 16 ) {
                    left: 770px;
                    top: 534px;
                }

                &:nth-of-type( 17 ) {
                    left: 913px;
                    top: 534px;
                }

                &:nth-of-type( 18 ) {
                    left: 1035px;
                    top: 633px;
                }

                &:nth-of-type( 19 ) {
                    left: 1157px;
                    top: 633px;
                }
            }
        }
    }
</style>
